<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onCloseDialog" @onConfirm="onConfirmDialog">
        <template v-slot:content>
            <el-form :model="deptModel" ref="deptRef" :rules="deptRules" label-width="85px" :inline="false">
                <el-form-item label="上级部门">
                    <el-tree-select v-model="deptModel.pid" :data="deptParentList" check-strictly class="pid">
                    </el-tree-select>
                </el-form-item>
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="deptModel.name"></el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="director">
                    <el-input v-model="deptModel.director"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="director_tel">
                    <el-input v-model="deptModel.director_tel"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="ord">
                    <el-input v-model="deptModel.ord"></el-input>
                </el-form-item>
                <el-form-item label="注释" prop="remarks">
                    <el-input v-model="deptModel.remarks" type="textarea" rows="2"></el-input>
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

import { ElForm, ElMessage } from 'element-plus'

import SysDialog from '@/components/SysDialog.vue'
import useDialog, { DialogType } from '@/hooks/useDialog'
import useInstance from '@/hooks/useInstance'
import useDeptModel, { IDept } from '@/composables/department/useDeptModel'
import { postDeptApi, putDeptApi } from '@/http/api/department'

const { dialog, onShowDialog, onCloseDialog } = useDialog()
const { global } = useInstance()
const { iDeptModel, deptRules } = useDeptModel()

// 接受父组件传进来的数据
defineProps(['deptParentList'])
// 调用父组件方法
const emit = defineEmits(['newGetDeptList'])

// 部门绑定数据
const deptModel = reactive<IDept>(iDeptModel())
// 部门ref属性
const deptRef = ref<InstanceType<typeof ElForm>>()
// 弹窗显示
const onShow = (dialogType: string, title: string, editData?: any) => {
    global.$resetForm(deptRef.value, deptModel, iDeptModel)
    dialog.title = title
    dialog.width = '360px'
    dialog.height = '320px'
    onShowDialog()
    if (editData && dialogType == DialogType.EDIT) {
        global.$objCoppy(editData, deptModel)
    }
    deptModel.type = dialogType
}
// 弹窗确定
const onConfirmDialog = () => {
    deptRef.value?.validate(valid => {
        if (valid) {
            if (deptModel.type == DialogType.ADD) {
                addDept(deptModel)
            }
            if (deptModel.type == DialogType.EDIT) {
                editDept(deptModel)
            }
        }
    })
}
// 添加部门
const addDept = async (deptModel: IDept) => {
    await postDeptApi(deptModel).then(res => {
        if (res && res.code == 201) {
            ElMessage.success('添加成功！')
            emit('newGetDeptList')
            global.$resetForm(deptRef.value, deptModel, iDeptModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
// 修改部门
const editDept = async (deptModel: IDept) => {
    await putDeptApi(deptModel.id, deptModel).then(res => {
        if (res && res.code == 202) {
            ElMessage.success('修改成功！')
            emit('newGetDeptList')
            global.$resetForm(deptRef.value, deptModel, iDeptModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

// 暴露法方给父组件
defineExpose({ onShow })

</script>

<style scoped lang='scss'>
.pid {
    width: 100%;
}
</style>